<template>
  <div>
     <pass  @canShow='show'></pass>
     <div v-show="ishow" class="dialy">
         <div class="left">
           <div class="head">
              <el-input v-model="title" placeholder="请输入标题" prefix-icon='el-icon-tickets'></el-input>
              <div class="date">
                <i class="el-icon-time"></i>
                {{date}}</div>
                <el-divider content-position="left">匆匆那时，匆匆逝去</el-divider>
           </div>
           <div class="con" >
             <el-input
              type="textarea"
              placeholder="请输入内容"
              class="tent"
              v-model="content">
            </el-input>
            <div class="foot">
              <div class="bgc">
                <el-tooltip  effect="dark" content="可拖动文件到此" placement="right">
                   <div class="drag" @dragenter="denter" @dragover="dover" @drop="drop"><i class="el-icon-circle-plus-outline" ></i></div>
                </el-tooltip>
                <input type="file" class="file" @change="update">
              </div>
               <div>签名：</div>
               <div class="sign" @click="sqm">{{sq}}</div>
               <el-button class="sub" type="primary" @click="submit">提交</el-button>
            </div>
           </div>
         </div>
         <div class="right">
           <right />
         </div>
     </div>
     
     <qm />
  </div>
</template>
  
<script>
import pass from '../pass.vue';
import passhow from '../../utils/canshow'
import { computed, getCurrentInstance, onMounted, reactive, toRefs } from 'vue';
import qm from '@/components/com/sign.vue'
import right from './rightpart'
export default {
  components:{
    pass,qm,right
  },
  setup(){
    let {ctx} =getCurrentInstance()
    onMounted(()=>{
      ctx.$bus.off()
      ctx.$bus.on('sign',(url)=>{
        let sign=document.querySelector('.sign')
        diary.sq='已签名'
        diary.signUrl=url
        sign.style.cssText=`
            background:url(${url});
            background-size:100% 100%;
        `
      })
    })
    let diary=reactive({
      title:'',
      content:'',
      sq:'留下我的...',
      signUrl:''
    })
    let date=computed(()=>{
      let d=new Date()
      let year =d.getFullYear()
      let m=d.getMonth()+1
      let da=d.getDate()
      let w=d.getDay()
      let week=''
       switch(w){
         case 1: week='一';break;
         case 2: week='二';break;
         case 3: week='三';break;
         case 4: week='四';break;
         case 5: week='五';break;
         case 6: week='六';break;
         case 7: week='日';break;
         default:break;
       }
      return `${year} 年 ${m} 月 ${da} 日 星期 ${week}`
    })
    let sqm=()=>{
      ctx.$bus.emit('getshow',null)
    }
    let submit=async ()=>{
      if(diary.title==''){
        ctx.$message.warning('标题不能为空')
        return 
      }
      if(diary.content==''){
        ctx.$message.warning('请写下你的话语')
        return
      }
      if(diary.sq!=='已签名'){
        ctx.$message.warning('请签名')
        return
      }
      let paper={
        date:date.value.replace(/\W/g,' '),
        title:diary.title,
        content:diary.content,
        sign:diary.signUrl
      }

      let res=await ctx.$axios.post('/addPaper',paper)
      if(res.status===200){
        diary.title=''
        diary.content=''
        let sign=document.querySelector('.sign')
        diary.sq='留下我的...'
        sign.style.cssText=`
            background:#fff;
            background-size:100% 100%;
        `
        ctx.$message.success('提交成功')
        ctx.$bus.emit('getp')
      }else{
        ctx.$message.error('提交失败')
      }
    }

    let drop=(e)=>{
        e.preventDefault()
        let file=e.dataTransfer.files
        console.log(file[0])
        readFile(file)
    }
    let update=(e)=>{
       let file=e.target?.files
       readFile(file)
    }
    function readFile(file){
      let reader= new  FileReader()
        if(/image/g.test(file[0].type)){
          reader.readAsDataURL(file[0])
          let tent =document.querySelector('.con')
          reader.onload=function(){
            tent.style.background=`url(${reader.result})`
          }
        }else if(/text|msword|doc/g.test(file[0].type)){
          
          reader.readAsText(file[0],'UTF-8')
          
          reader.onload=function(){
            console.log(reader.result)
              diary.content=reader.result
          }
        }else{
          ctx.$message.warning('请选择图片或者文本格式')
        }
    }
    let denter=(e)=>{
       e.preventDefault()
    }
    let  dover=(e)=>{
       e.preventDefault()
    }
    return {
      ...passhow(),...toRefs(diary),date,sqm,submit,dover,denter,drop,update
    }
  }
};
</script>

<style lang='less' scoped>
.dialy{
  width: 100%;
  display: flex;

  .left{
    width:80%;
    border-right: 1px solid skyblue;
    .head{
      position: relative;
      text-align: center;
      height: 100px;
      padding: 10px 20px;
      .el-input{
        width: 50%;
        font-size: 28px;
        font-weight: 600;
        color: black;
        font-family: 'songti';
        margin-bottom:10px;
      }
      .date{
        position: absolute;
        bottom: 30px;
        right: 20px;
        font-size: 12px;
        color: rgb(5, 77, 231);
      }
      .el-divider{
        margin: 10px 0;
        background: rgb(5, 77, 231);
      }
      /deep/.el-divider__text.is-left{
          background: rgb(163,223,163);
        }
    }
    .con{
      text-align: center;
      .tent{
        width: 90%;
        text-indent:20px;
        font-size:20px;
        color: black;
      }
      
    }
    .foot{
      position: relative;
        width: 100%;
        height: 40px;
        line-height: 60px;
        padding: 5px 20px 0 20px;
        margin-top: 20px;
        border-top:1px solid blue ;
        display: flex;
        justify-content:flex-end;
        align-items: center;
        .sign{
          border: 1px solid black;
          height: 30px;
          line-height: 30px;
          width: 100px;
          margin: 0 10px 0 5px;
          font-size: 12px;
          text-align: left;
          padding: 0 5px;
        }
        .el-button{
          width: 60px;
          text-align: center;
          height: 30px;
          line-height: 30px;
          padding: 0;
        }
        .bgc{
          position: absolute;
          top:0;
          left: 10px;
          vertical-align: baseline;
          display: flex;
          .drag{
            width:40px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            border: 1px dashed rgb(61, 14, 230);
            margin-right: 10px;
            &:hover{
              color: red;
            }
          }
          .file{
            display: block;
            height: 40px;
            line-height: 40px;
          }
        }
      }
    /deep/.el-textarea__inner{
        height: 400px;
        min-height: 200px;
        padding: 5px 5px 30px 5px;
    }
  }
  .right{
    width: 20%;
    height: 550px;
    border-left:1px solid skyblue;
  }
}
</style>